<template>
    <div class="main max-width">
        <el-card class="max-width">
            <div slot="header">
                <span>工具</span>
            </div>

            <el-button @click="btn_click">确认</el-button>
            <el-button @click="btn2_click">确认2</el-button>

            <div>---</div>
            <router-link class="link" to="/loader?name=docker">
                <el-tag>load[docker viewer]</el-tag>
            </router-link>

            <div ref="con"></div>
            <component :is="com" v-if="com" :prop="data"></component>
        </el-card>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        data() {
            return {com: "", data: {id: 1, name: "OK", height: 30}, info: {id: 3}}
        },
        mounted() {
        },
        methods: {
            btn_click() {

                var name = "student"

                //注册
                var node = Vue.component(name, {
                    //声明props
                    data() {
                        return {data: {}};
                    },
                    props: ['prop'],
                    mounted() {
                        this.data = this.prop;
                    },
                    template: '<div v-if="data"><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span><el-button @click="click" type="primary">确认</el-button></div>',
                    // computed: {
                    //     inputListeners: function () {
                    //         var vm = this
                    //         // `Object.assign` 将所有的对象合并为一个新对象
                    //         return Object.assign({},
                    //             // 我们从父级添加所有的监听器
                    //             this.$listeners,
                    //             // 然后我们添加自定义监听器，
                    //             // 或覆写一些监听器的行为
                    //             {
                    //                 // 这里确保组件配合 `v-model` 的工作
                    //                 click: function (event) {
                    //                     vm.data.name = "o!"
                    //                 }
                    //             }
                    //         )
                    //     }
                    // },
                    methods: {
                        click(e) {
                            this.data.name = "o2!"
                        }
                    },
                });//目的：组件可复用


                this.com = name;
            },
            btn2_click() {
                this.data.name = "ok2"
            }
        }
    }
</script>
